<template>
  <div>
    <div ref="boxRef">{{num }}</div>
    <button @click="increment">+</button>
  </div>
</template>

<script lang='ts' setup>
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
let num=ref<number>(10)
let boxRef=ref<HTMLElement>()
const increment=()=>num.value++
const timers=setInterval(()=>{
    console.log('---定时器----');
    num.value++
},1000)
onBeforeMount(()=>{
    console.group("=======onBeforeMount==========")
    console.log("数据:",num.value);
    console.log("DOM:",boxRef.value);
    console.groupEnd()
})
onMounted(()=>{
    console.group("=======onMounted==========")
    console.log("数据:",num.value);
    console.log("DOM:",boxRef.value);
    console.groupEnd()
})
onBeforeUpdate(()=>{
    console.group("=======onBeforeUpdate==========")
    console.log("数据:",num.value);
    console.log("DOM:",boxRef.value);
    console.groupEnd()
})
onUpdated(()=>{
    console.group("=======onUpdated==========")
    console.log("数据:",num.value);
    console.log("DOM:",boxRef.value);
    console.groupEnd()
})
onBeforeUnmount(()=>{
    console.group("=======onBeforeUnmountnUpdated======")
    console.log("数据:",num.value);
    console.log("DOM:",boxRef.value);
    console.groupEnd()
    //清除定时器
    if(timers){
      clearInterval(timers)
    }
})
onUnmounted(()=>{
    console.group("=======onUnmounted======")
    console.log("数据:",num.value);
    console.log("DOM:",boxRef.value);
    console.groupEnd()
})

</script>

<style lang='scss' scoped>
</style>